<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <el-card>
        <Detail title="总销售额" count="$12212">
          <template v-slot:container class="container">
            <span>周同比</span>
            <span>
              56.77%
              <svg
                t="1662101153926"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="20944"
                width="16"
                height="16"
              >
                <path
                  d="M392.637878 387.519538h238.680173v636.480462h-238.680173z"
                  p-id="20945"
                  fill="#d81e06"
                />
                <path
                  d="M495.270352 7.222462L155.548906 346.943909a23.868017 23.868017 0 0 0 16.707612 41.37123h679.442893a23.868017 23.868017 0 0 0 16.707612-41.37123L529.481177 7.222462a23.868017 23.868017 0 0 0-34.210825 0z"
                  p-id="20946"
                  fill="#d81e06"
                />
              </svg>
            </span>
            <span>日同比</span>
            <span>
              56.77%
              <svg
                t="1662101218977"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="22761"
                width="16"
                height="16"
              >
                <path
                  d="M392.448255 0h238.494873v635.98633h-238.494873z"
                  p-id="22762"
                  fill="#f4ea2a"
                />
                <path
                  d="M495.00105 1016.783145L155.543347 677.325441A23.849487 23.849487 0 0 1 172.237988 635.98633h678.915407a23.849487 23.849487 0 0 1 16.694641 41.339111l-338.662721 339.457704a23.849487 23.849487 0 0 1-34.184265 0z"
                  p-id="22763"
                  fill="#f4ea2a"
                />
                <path
                  d="M392.448255 0h238.494873v635.98633h-238.494873z"
                  p-id="22764"
                  fill="#f4ea2a"
                />
                <path
                  d="M495.00105 1016.783145L155.543347 677.325441A23.849487 23.849487 0 0 1 172.237988 635.98633h678.915407a23.849487 23.849487 0 0 1 16.694641 41.339111l-338.662721 339.457704a23.849487 23.849487 0 0 1-34.184265 0z"
                  p-id="22765"
                  fill="#f4ea2a"
                />
              </svg>
            </span>
          </template>
          <template v-slot:footer>日销售额 $46546</template>
        </Detail>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <Detail title="访问量" count="8848">
          <template v-slot:container class="container">
            <lineChart />
          </template>
          <template v-slot:footer>日访问量 6546</template>
        </Detail>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <Detail title="支付笔数" count="8848">
          <template v-slot:container class="container">
            <barChart />
          </template>
          <template v-slot:footer>转化率 65%</template>
        </Detail>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <Detail title="运营活动效果" count="67%">
          <template v-slot:container class="container">
            <progressChart />
          </template>
          <template v-slot:footer>
            <span style="fontSize:15px">周同比</span>
            <span>
              56.77%
              <svg
                t="1662101153926"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="20944"
                width="15"
                height="15"
              >
                <path
                  d="M392.637878 387.519538h238.680173v636.480462h-238.680173z"
                  p-id="20945"
                  fill="#d81e06"
                />
                <path
                  d="M495.270352 7.222462L155.548906 346.943909a23.868017 23.868017 0 0 0 16.707612 41.37123h679.442893a23.868017 23.868017 0 0 0 16.707612-41.37123L529.481177 7.222462a23.868017 23.868017 0 0 0-34.210825 0z"
                  p-id="20946"
                  fill="#d81e06"
                />
              </svg>
            </span>
            <span style="fontSize:15px">日同比</span>
            <span>
              56.77%
              <svg
                t="1662101218977"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="22761"
                width="15"
                height="15"
              >
                <path
                  d="M392.448255 0h238.494873v635.98633h-238.494873z"
                  p-id="22762"
                  fill="#f4ea2a"
                />
                <path
                  d="M495.00105 1016.783145L155.543347 677.325441A23.849487 23.849487 0 0 1 172.237988 635.98633h678.915407a23.849487 23.849487 0 0 1 16.694641 41.339111l-338.662721 339.457704a23.849487 23.849487 0 0 1-34.184265 0z"
                  p-id="22763"
                  fill="#f4ea2a"
                />
                <path
                  d="M392.448255 0h238.494873v635.98633h-238.494873z"
                  p-id="22764"
                  fill="#f4ea2a"
                />
                <path
                  d="M495.00105 1016.783145L155.543347 677.325441A23.849487 23.849487 0 0 1 172.237988 635.98633h678.915407a23.849487 23.849487 0 0 1 16.694641 41.339111l-338.662721 339.457704a23.849487 23.849487 0 0 1-34.184265 0z"
                  p-id="22765"
                  fill="#f4ea2a"
                />
              </svg>
            </span>
          </template>
        </Detail>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import lineChart from "./lineChart";
import barChart from "./barChart";
import progressChart from "./progressChart";
import Detail from "./Detail";
export default {
  name: "Card",
  components: { Detail, lineChart, barChart, progressChart }
};
</script>

<style lang="scss" scoped>
.container {
  span {
    margin-right: 5px;
  }
}
.footer {
  font-size: 16px;
}
</style>
